<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>工作室成员</title>
  <link rel="stylesheet" href="static/css/bootstrap.min.css">
  <link rel="stylesheet" href="static/css/icons/font/bootstrap-icons.min.css">
  <style>
    /*顶栏*/
    .header{
      height:150px;
      background-color: #2c416f;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      color: white;
      text-align: center;
    }
    .header-left{
      display:flex;
      align-items: center;
    }
    .header img{
      height:120px;
      margin-right: 10px;
    }
    .hp{
      font-size: 60px;
      color: white;
      text-decoration: none;
    }
    .ps{
      font-size: 20px;
      color: white;
      text-decoration: none;
    }
    .pm{
      height:20px;
      color: white;
      margin-right: 2px;
      font-size: 20px;
      text-decoration: none;
    }

    /*导航栏*/
    nav {
      background-color: #153173;
      overflow: hidden;
    }

    nav ul {
      display: flex;
      justify-content: space-around;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    nav li {
      float: left;
    }
    nav li a {
      font-size: 20px;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    nav li a:hover {
      color: red;
      /*border-bottom: 2px solid red;*/
      animation: jump 1s infinite alternate; /* 持续时间1秒，无限循环，交替方向 */
    }

    /*工作室成员*/
    .ce{
        width: 12.5%;
        height: 3070px;
        background-image: linear-gradient(
                to bottom,
                #2c416f,
                pink,
                #375fd0,
                pink,
                #2c416f
        );
        float: left;
        margin-right: 25px;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    li {
      list-style: none;
    }
    /* 去除列表默认样式 */
    ul {
      list-style-type: none; /* 去除列表项前的项目符号 */
      padding: 0; /* 去除默认的内边距 */
      margin: 0; /* 去除默认的外边距 */
    }

    body {
      font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    }
    a {
      /* color: #fff; */
      text-decoration: none;
    }
    .ce ul {
      padding: 25px 0;
    }
    .ce ul li {
      width: 100%;
      height: 10%;
      color: #fff ;
      background-color: #062D6D;
      text-align: center;
      margin-top: 50px; /* 项之间的间距 */
      font-size: 25px; /* 字体大小 */
      overflow: hidden; /* 防止动画时文字溢出 */
      transition: transform 0.3s ease; /* 添加过渡效果 */
    }
    .ce li a {
      display: block; /* 设置为行内块级元素  */
      line-height: 100px; /* 与li的高度相同，实现垂直居中 */
      color: inherit; /* 继承父元素的文字颜色 */
      /* 初始时文字不跳动 */
      animation: none;
    }
    .ce li:hover {
      color: skyblue; /* 悬停时的文字颜色（这里保持白色，但可以根据需要更改）*/
      background-color: #0056b3;
    }
    .ce li:hover a {
      animation: jump 1s infinite alternate; /* 持续时间1秒，无限循环，交替方向 */
    }
    .ce ul li:active {
      transform: scale(0.95); /* 点击时缩小文字 */
      background-color: pink; /* 可选：改变背景色以增强视觉反馈 */
    }
    /* 定义跳动的动画 */
    @keyframes jump {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); } /* 向下跳动5px */
    }

    .cy1{
      display: flex;
      color: #274271;
    }
    .cy1 ul {
      display: flex;
      flex-wrap: wrap;
    }
    .cy1 ul li {
      margin: 30px 31px;
      margin-bottom: 0px;
      padding: 50px;
      width: 300px;
      height: 400px;
      background-color: #E0DAF0;
    }
    .cy2{
      display: flex;
      color: #274271;
    }
    .cy2 ul {
      display: flex;
      flex-wrap: wrap;
    }
    .cy2 ul li {
      margin: 30px 31px;
      margin-bottom: 0px;
      padding: 50px;
      width: 300px;
      height: 400px;
      background-color: #E0DAF0;
    }
    .cy3{
      display: flex;
      color: #274271;
    }
    .cy3 ul {
      display: flex;
      flex-wrap: wrap;
    }
    .cy3 ul li {
      margin: 30px 31px;
      margin-bottom: 0px;
      padding: 50px;
      width: 300px;
      height: 400px;
      background-color: #E0DAF0;
    }
    @media only screen and(min-width: 0) and (max-width: 600px){
      .footer{
        display: none;!important;
      }
    }
    @media only screen and (min-width: 800px) and (max-width: 2000px){
      .footer{
        display: flex;
        background-color: #274271;
        width: 100%;
        height: 313px;
        /*margin-top: 100%;*/
      }
    }

    /*底栏*/

    .left{
      display: flex;
      margin: 50px auto;
    }
    .right{
      display: flex;
      color: white;
      font-size: 25px;
      margin: 40px auto;
    }
    .right ul li{
      padding: 10px;
    }
    /* 定义跳动的动画 */
    @keyframes jump {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); } /* 向下跳动5px */
    }
  </style>
</head>
<body>
<div class = "header d-flex justify-content-between">
  <div class = "header-left d-flex align-content-center">
    <a href="#"><img src="static/img/logo.png" alt="logo"></a>
    <a href = "#" class = "hp">510-梦想工作室</a>
  </div>
  <div class = "header-right d-flex align-content-center">
    <a href = "/personal" class = "pm"><i class=" bi-person-circle"></i></a>
    <a href = "/personal" class = "ps">个人中心</a>
  </div>
</div>
<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#news">荣誉展示</a></li>
    <li><a href="#people">工作室人员</a></li>
    <li><a href="#model">大模型</a></li>
    <li><a href="#share">资源共享</a></li>
    <li><a href="#joinus">加入我们</a></li>
    <li><a href="#aboutus">关于我们</a></li>
    <li><a href="#feedback">意见反馈</a></li>
  </ul>
</nav>

<!--工作室成员-->
<div class="ce">
  <ul>
    <li><a href="#">指导老师</a></li>
    <li><a href="#">团队成员</a></li>
  </ul>
  <div style="margin-bottom: 20px"><a href="#" style="color: white;font-size: 22px;margin: 80px">大四</a></div>
  <div style="margin-bottom: 20px"><a href="#" style="color: white;font-size: 22px;margin: 80px">大三</a></div>
  <div style="margin-bottom: 20px"><a href="#" style="color: white;font-size: 22px;margin: 80px">大二</a></div>
  <div style="margin-bottom: 20px"><a href="#" style="color: white;font-size: 22px;margin: 80px">大一</a></div>
</div>

<div style="width: 86%;height: 180px;background-color: #CCCCCC;
margin-left: 0px;margin-top: 25px;margin-bottom:25px;float: right">
  <img src="#" style="width: 120px;height: 150px;background-color: blue;margin-top: 15px;margin-left: 100px">
  <span style="float:left;font-size: 30px;float: right;margin-right: 70%;margin-top: 1%" >
    杨 磊
    <p style="font-size: 20px;padding-top: 10px">个人简历...</p>
  </span>
</div>

<div class="cy1" style="display:flex;width: 86%;height: 460px;background-color: #CCCCCC">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</div>
<div class="cy2" style="display:flex;width: 86%;height: 910px;background-color: #CCCCCC;margin: 25px 0px">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</div>
<div class="cy3" style="display:flex;width: 86%;height: 1390px;background-color: #CCCCCC;margin: 25px 0px">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

<!--底栏-->
<div class="footer">
  <div class="left">
    <img src="../html/static/img/logo.png" style="width: 220px;height: 220px;">
    <div style="color: white;font-size: 70px; margin: 55px 80px">510-梦想工作室</div>
  </div>
  <div class="right">
    <ul>
      <li>联系方式：</li>
      <li>地址：中国矿业大学徐海学院主楼-608</li>
      <li>版权所有：©中国矿业大学徐海学院510梦想工作室</li>
      <li>XXXXXXXXX</li>
    </ul>
  </div>
</div>
</body>
</html>